<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Magic Zoom&#153;</title>
	

	<style type="text/css"><!--
		body {background:#fff; margin:0; padding:0; font-size: 100%;}
		body, td {font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif; line-height: 1.5em;}
		h1 {font-size:1.5em; font-weight:normal; color:#555;}
		h2 {font-size:1.3em; font-weight:normal; color:#555;}
		h2.caption {margin: 2.5em 0 0;}
		a {outline: none;}
		table {margin:0; padding:0; border-collapse: collapse;}
		th {background:#CCC; text-align: left; padding: 2px 4px; font-weight: normal;}
		td {vertical-align: top; border: 1px;}
		img {border:0;}
		.leftcol {background:#EDF6CA; padding: 20px; height: 100%}
		.nav {width: 180px;}
		.nav h2 {background: #658F11; margin:10px 0 0 0; padding: 3px 3px 5px 10px; font-size: 0.9em; color:#FFF;}
		.nav ul {list-style-type: none; padding: 0 0 10px 0; margin:0 0 20px; background:#99CC33;}
		.nav li a {text-decoration: none; display: block; padding: 3px 3px 3px 10px; margin: 0; font-size: 0.9em; color:#FFF; zoom: 1;}
		.nav li a:hover {background: #B5DF61;}
		.active {font-weight: bold;}
		.arrow {text-align: right;}
		.menuTd a {color:#fff; font-weight:bold;}
		.code {font-size:12px; line-height:18px; margin:10px 0; display:block; padding:3px; border:1px solid #aaa;}
		span.r {color:red;}
		span.g {color:green;}
		span.b {color:blue;}
		table.tbl {background:#aaa; margin-bottom: 20px; font-size: 0.9em; border: 1px solid #999;}
		caption {text-align: left; padding: 4px 12px; background: #999; color: #fff; font-size: 1.1em; margin: 0 0 0 -1px;}
		caption a {color: #fff; padding: 2px;}
		caption a:hover {background:#FFF; color: #999;}
		.tbl th {background:#eee; padding:4px 8px 4px 16px;}
        .tbl td {background:#fff; padding:4px 8px 4px 16px; vertical-align:top; border-bottom: 1px #999 solid;}
		.tbl .tr1 td {background:#fff;}
		.tbl .tr2 td {background:#f2f2f2;}
		.mtbl {width:100%; height:100%;}
		.rTd {padding:20px; width:100%;}
		div.exmpl {margin:0 0 5px 0; font-weight:bold;}
		.html4strict {border:1px solid #AAAAAA; display:block; font-size:12px; line-height:18px; margin:10px 0pt; padding:3px;}
		.html4strict .de1, .html4strict .de2 {font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;}
		.html4strict {font-family:monospace;}
		.html4strict .imp {font-weight: bold; color: red;}
		.html4strict li, .html4strict .li1 {font-weight: normal; vertical-align:top;}
		.html4strict .ln {width:1px; text-align:right; margin:0; padding:0 2px; vertical-align:top;}
		.html4strict .li2 {font-weight: bold; vertical-align:top;}
		.html4strict .kw2 {color: #000000; font-weight: bold;}
		.html4strict .kw3 {color: #000066;}
		.html4strict .es0 {color: #000099; font-weight: bold;}
		.html4strict .br0 {color: #66cc66;}
		.html4strict .sy0 {color: #66cc66;}
		.html4strict .st0 {color: #ff0000;}
		.html4strict .nu0 {color: #cc66cc;}
		.html4strict .sc-1 {color: #808080; font-style: italic;}
		.html4strict .sc0 {color: #00bbdd;}
		.html4strict .sc1 {color: #ddbb00;}
		.html4strict .sc2 {color: #009900;}
		.html4strict .ln-xtra, .html4strict li.ln-xtra, .html4strict div.ln-xtra {background-color: #ffc;}
		.html4strict span.xtra {display:block;}
	--></style>
</head>
<body>
<table class="mtbl">
<tr>
    <td class="leftcol">
		<div class="nav">
			<h2>Magic Zoom&#8482;</h2>
			<ul>
				<li><a  href="index.html">Overview</a></li>
                                <li><a class="active" href="parameters.html">Parameters</a></li>
                                <li><a  href="wizard.html">Settings wizard</a></li>
				<li><a href="http://www.magictoolbox.com/buy/magiczoom/" title="External link">Buy a license &#155;</a></li>
				<li><a href="http://www.magictoolbox.com/support/" title="External link">Get support &#155;</a></li>
			</ul>
		</div>
		<div class="nav">
			<h2>Examples</h2>
			<ul>
				<li><a  href="example1.html">Default parameters</a></li>
				<li><a  href="example2.html">Window dimensions</a></li>
                                <li><a  href="example3.html">Multiple images</a></li>
				<li><a  href="example4.html">Zoom positions</a></li>
				<li><a  href="example5.html">Custom zoom position</a></li>
				<li><a  href="example6.html">Zoom fade/smoothing</a></li>
				<li><a  href="example7.html">Opacity options</a></li>
				<li><a  href="example8.html">CSS styling</a></li>
                                <li><a  href="example9.html">Entire image</a></li>
                                <li><a  href="example10.html">Drag mode</a></li>
                                <li><a  href="example11.html">Global options</a></li>
                <li><a  href="example12.html">Activate/Initialize</a></li>
                <li><a  href="example13.html">Magic Zoom&#8482; API</a></li>
			</ul>
		</div>
	</td>
	<td class="rTd">
		<h1>Magic Zoom&#153;</h1>
		
	    

<p>Use the <a href="wizard.html">settings wizard</a> to try out the many customizations.</p>

<table class="tbl" cellpadding="0" cellspacing="1">
    <caption>
        Parameters for Magic Zoom&#153;
    </caption>
    <tr>
        <th>Parameter&nbsp;name</th>
        <th>Default&nbsp;value</th>
        <th>Description</th>
    </tr>
    <tr>
        <td><b>zoom-width</b></td>
        <td>300</td>
        <td>Width of zoom window, px</td>
    </tr>
    <tr>
        <td><b>zoom-height</b></td>
        <td>300</td>
        <td>Height of zoom window, px</td>
    </tr>
    <tr>
        <td><b>zoom-position</b></td>
        <td>right</td>
        <td>Position of zoom window (left|right|top|bottom|inner|custom)</td>
    </tr>
    <tr>
        <td><b>zoom-distance</b></td>
        <td>15</td>
        <td>Distance between small image and zoom window, px</td>
    </tr>
    <tr>
        <td><b>smoothing</b></td>
        <td>true</td>
        <td>Enable smooth zoom movement</td>
    </tr>
    <tr>
        <td><b>smoothing-speed</b></td>
        <td>40</td>
        <td>Speed of smoothing (1-99)</td>
    </tr>
    <tr>
        <td><b>opacity</b></td>
        <td>50</td>
        <td>Opacity of hovered area (0-100)</td>
    </tr>
    <tr>
        <td><b>opacity-reverse</b></td>
        <td>false</td>
        <td>Add opacity to background instead of hovered area</td>
    </tr>
    <tr>
        <td><b>click-to-initialize</b></td>
        <td>false</td>
        <td>Click to initialize Magic Zoom and download large image</td>
    </tr>
    <tr>
        <td><b>click-to-activate</b></td>
        <td>false</td>
        <td>Click to show the zoom</td>
    </tr>
    <tr>
        <td><b>show-title</b></td>
        <td>top</td>
        <td>Position of the image title in the zoom window (top/bottom/false) <b style="color:red;">new in 3.1</b></td>
    </tr>
    <tr>
        <td><b>thumb-change</b></td>
        <td>click</td>
        <td>Multiple images change on click/mouseover</td>
    </tr>
    <tr>
        <td><b>selectors-mouseover-delay</b></td>
        <td>200</td>
        <td>Multiple images delay in ms before switching thumbnails</td>
    </tr>
    <tr>
        <td><b>selectors-effect</b></td>
        <td>dissolve</td>
        <td>Dissolve or cross fade thumbnail when switching thumbnails (dissolve/fade/false) <b style="color:red;">new in 3.1</b></td>
    </tr>
    <tr>
        <td><b>selectors-effect-speed</b></td>
        <td>400</td>
        <td>Selectors effect speed, ms <b style="color:red;">new in 3.1</b></td>
    </tr>
    <tr>
        <td><b>preload-selectors-small</b></td>
        <td>true</td>
        <td>Multiple images, preload small images</td>
    </tr>
    <tr>
        <td><b>preload-selectors-big</b></td>
        <td>false</td>
        <td>Multiple images, preload large images</td>
    </tr>
    <tr>
        <td><b>zoom-fade</b></td>
        <td>false</td>
        <td>Zoom window fade effect (true|false)</td>
    </tr>
    <tr>
        <td><b>zoom-fade-in-speed</b></td>
        <td>400</td>
        <td>Zoom window fade-in speed, ms</td>
    </tr>
    <tr>
        <td><b>zoom-fade-out-speed</b></td>
        <td>200</td>
        <td>Zoom window fade-out speed, ms</td>
    </tr>
    <tr>
        <td><b>fps</b></td>
        <td>25</td>
        <td>Frames per second for zoom effect</td>
    </tr>
    <tr>
        <td><b>show-loading</b></td>
        <td>true</td>
        <td>Loading message (true|false)</td>
    </tr>
    <tr>
        <td><b>loading-msg</b></td>
        <td>Loading zoom...</td>
        <td>Loading message text</td>
    </tr>
    <tr>
        <td><b>loading-opacity</b></td>
        <td>75</td>
        <td>Loading message opacity (0-100)</td>
    </tr>
    <tr>
        <td><b>loading-position-x</b></td>
        <td>-1</td>
        <td>Loading message X-axis position, -1 is center</td>
    </tr>
    <tr>
        <td><b>loading-position-y</b></td>
        <td>-1</td>
        <td>Loading message Y-axis position, -1 is center</td>
    </tr>
    <tr>
        <td><b>drag-mode</b></td>
        <td>false</td>
        <td>Click and drag to move the zoom</td>
    </tr>
    <tr>
        <td><b>move-on-click</b></td>
        <td>true</td>
        <td>Click alone will also move zoom (drag mode only)</td>
    </tr>
    <tr>
        <td><b>x</b></td>
        <td>-1</td>
        <td>Initial zoom X-axis position for drag mode, -1 is center</td>
    </tr>
    <tr>
        <td><b>y</b></td>
        <td>-1</td>
        <td>Initial zoom Y-axis position for drag mode, -1 is center</td>
    </tr>
    <tr>
        <td><b>always-show-zoom</b></td>
        <td>false</td>
        <td>Make zoom window always visible. (Automatically true in drag-mode.)</td>
    </tr>
    <tr>
        <td><b>preserve-position</b></td>
        <td>false</td>
        <td>Position of zoom can be remembered for multiple images and drag mode</td>
    </tr>
    <tr>
        <td><b>fit-zoom-window</b></td>
        <td>true</td>
        <td>Resize zoom window if big image is smaller than zoom window</td>
    </tr>
    <tr>
        <td><b>entire-image</b></td>
        <td>false</td>
        <td>Show entire large image on hover <b style="color:red;">new in 3.1</b></td>
    </tr>
</table> 



        
        <div id="_code_">
		
        </div>
	</td>
</tr></table></body></html>
